import React from 'react'
import { connect } from 'dva'

import * as Constant from '../../constant'
import Title from '../../components/Title'
import OrderListItem from '../../components/OrderListItem'

import './style.css'

class OrderList extends React.Component {

    constructor(props){
        super(props)
        this.state = {
            status: ''
        }
    }

    query = (status) => {
        const { dispatch } = this.props
        dispatch({
            type: 'order/getOrderList',
            payload: {
                status
            }
        })
        this.setState({ status })
    }

    render() {
        const { order } = this.props
        const { status } = this.state
        
        let conditionList = [
            {
                status: '',
                text: '全部'
            },
            {
                status: Constant.ORDER_STATUS.ORDER_STATUS_CREATEAT,
                text: '待付款'
            },
            {
                status: Constant.ORDER_STATUS.ORDER_STATUS_PAY,
                text: '待收货'
            },
            {
                status: Constant.ORDER_STATUS.ORDER_STATUS_OVER,
                text: '已完成'
            },
        ]

        return (
            <div className='orderList' >
                <Title title='订单列表' />
                <ul className='orderList-search'>
                    {
                        conditionList.map(item => (
                            <li 
                                key={item.status}
                                className={status === item.status ? 'active' : ''} 
                                onClick={() => this.query(item.status)}
                            >
                                {item.text}
                            </li>
                        ))
                    }
                </ul>
                {
                    order.list.map(item => (
                        <OrderListItem 
                            key={item._id}
                            order={item}
                        />
                    ))
                }
                
            </div>
        )
    }
}

const mapState = state => ({
    order: state.order
})

export default connect(mapState)(OrderList)
